<template>
    <div v-if="visible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000">
      <div class="bg-white p-4 rounded shadow-lg w-[300px]">
        <div class="flex justify-between items-center mb-2">
          <h3 class="text-lg font-bold">低电量设备列表</h3>
          <button @click="hide" class="text-red-500">&times;</button>
        </div>
        <table class="w-full border-collapse border border-gray-200">
          <thead>
            <tr>
              <th class="border border-gray-300 p-2">姓名</th>
              <th class="border border-gray-300 p-2">时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(time, name) in lowBatteryDevicesMap" :key="name">
              <td class="border border-gray-300 p-2">{{ name }}</td>
              <td class="border border-gray-300 p-2">{{ time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps, defineEmits, watch } from 'vue';
  
  // Props
  const props = defineProps<{ lowBatteryDevices: Map<string, string> }>();
  const emits = defineEmits<{
    (e: 'close'): void;
  }>();
  
  // State
  const visible = ref(false);
  
  // Convert Map to object for easy iteration in template
  const lowBatteryDevicesMap = computed(() => {
    const map: { [key: string]: string } = {};
    props.lowBatteryDevices.forEach((time, name) => {
      map[name] = time;
    });
    return map;
  });
  
  // Show the list
  watch(() => props.lowBatteryDevices, (newVal) => {
    if (newVal.size > 0) {
      visible.value = true;
    }
  });
  
  // Hide the list
  const hide = () => {
    visible.value = false;
    emits('close');
  };
  </script>
  
  <style scoped>
  /* Optional styling */
  </style>